<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui在线调试</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script type="text/javascript" src="/layui/layui.js"></script>
    <style>
        body{margin: 10px;}
        .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
    </style>
</head>
<body>
<button class="layui-btn layui-btn-lg layui-parent-btn">顶级菜单添加</button>
<table class="layui-hide" id="menulist" lay-filter="demo"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs menu-add" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-xs menu-edit" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs menu-del" lay-event="del">删除</a>
</script>
<script type="text/html" id="tpl_moban">
    {{#  if(d.status == '1'){ }}
    <button class="layui-btn layui-btn-xs layui-btn-normal">显示</button>
    {{#  } else { }}
    <button class="layui-btn layui-btn-danger layui-btn-xs">隐藏</button>
    {{#  } }}
</script>
<script>
    layui.use(['table','layer'], function(){
        var table = layui.table, // 表格
            $ = layui.jquery;
        //执行一个 table 实例
        table.render({
            elem: '#menulist',
            height: 'auto',
            url: "{:url('system/menulist')}", // 数据接口
//            page: true, // 开启分页
            cols: [[ //表头
                {field: 'id', title: 'ID', width:80, fixed: 'left'},
                {field: 'title', title: '菜单', width:210},
                {field: 'parent_id', title: 'PID', width:80},
                {field: 'name', title: '路径', width:250},
                {field: 'sort', title: '排序', width:80},
                {field: 'status', title: '状态', width: 170, templet: '#tpl_moban'},
                {fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
            ]]
        });
        $(".layui-parent-btn").click(function () {
            layer.open({
                type: 2,
                title: '后台菜单添加',
                shadeClose: true,
                shade: 0.8,
                area: ['460px', '320px'],
                content: "{:url('addMenu')}" //iframe的url
            });
        });
        //监听工具条
        table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'add'){
                layer.open({
                    type: 2,
                    title: '后台菜单添加',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['420px', '360px'],
                    content: "{:url('addMenu')}?p="+data.id //iframe的url
                });
            } else if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    var index;
                    $.ajax({
                        type:    'post',
                        url:     "{:url('delMenu')}",
                        data:    {id:data.id},
                        dataType:'json',
                        beforeSend:function () {
                            index = layer.load(0, {shade: false});
                        },
                        success:    function (msg) {
                            if(msg.errCode === '0') {
                                window.location.reload();
                            } else {
                                layer.close(index);
                                layer.msg(msg.msg);
                            }
                        }
                    });
                });
            } else if(layEvent === 'edit'){
                layer.open({
                    type: 2,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['400px', '310px'], //宽高
                    content: "{:url('editMenu')}?id="+data.id
                });
            }
        });
    });
</script>
</body>
</html>